<template>
	<view class="register-container">
		<view class="header flex flex-direction align-center">
			<image class="logo" src="../static/logo.png" mode="widthFix"></image>
			<view class="tip">欢迎注册优购宝</view>
		</view>
		<view class="form-group">
			<uni-forms ref="form" :rules="rules" :modelValue="formData" validate-trigger="blur" label-width="12px"
				err-show-type="toast">
				<uni-forms-item name="tenantId">
					<uni-icons custom-prefix="iconfont" type="icon-friendfill" color="#999" size="18"></uni-icons>
					<!-- <select v-model="formData.tenantId"  class="downlist">
						<option v-for="item in tenantList" :key="item.tenantId" :label="item.companyName" :value="item.tenantId"></option>
					</select> -->
					<uni-data-select class="downlist" :clear="false" placeholder="请选择公司" v-model="formData.tenantId" :localdata="tenantList"></uni-data-select>
				</uni-forms-item>				
				<uni-forms-item required name="username">
					<uni-icons custom-prefix="iconfont" type="icon-user" color="#999" size="18"></uni-icons>
					<uni-easyinput v-model="formData.username" type="text" maxlength="20" :inputBorder="false"
						clearSize="18" trim="all" placeholder="请输入登录名" />
				</uni-forms-item>

				<uni-forms-item required name="password">
					<uni-icons custom-prefix="iconfont" type="icon-password" color="#999" size="18"></uni-icons>
					<uni-easyinput v-model="formData.password" type="password" maxlength="16" :inputBorder="false"
						clearSize="18" trim="all" placeholder="请输入密码" />
				</uni-forms-item>

				<uni-forms-item required name="confirmPassword">
					<uni-icons custom-prefix="iconfont" type="icon-password" color="#999" size="18"></uni-icons>
					<uni-easyinput v-model="formData.confirmPassword" type="password" maxlength="16"
						:inputBorder="false" clearSize="18" trim="all" placeholder="请再次输入密码" />
				</uni-forms-item>
				
				<view class="tip">密码应由8-16位且数字、字母和特殊符号三选二组成</view>

				<uni-forms-item name="nickname">
					<uni-icons custom-prefix="iconfont" type="icon-nicheng" color="#999" size="18"></uni-icons>
					<uni-easyinput v-model="formData.nickname" type="text" maxlength="20" :inputBorder="false"
						clearSize="18" trim="all" placeholder="请输入昵称" />
				</uni-forms-item>

				<uni-forms-item name="invitationCode">
					<uni-icons custom-prefix="iconfont" type="icon-yaoqingma" color="#999" size="16"></uni-icons>
					<uni-easyinput v-model="formData.invitationCode" type="digit" maxlength="10" :inputBorder="false"
						clearSize="18" trim="all" placeholder="请输入邀请码" />
				</uni-forms-item>

				<uni-forms-item required name="email">
					<uni-icons custom-prefix="iconfont" type="icon-youxiang" color="#999" size="18"></uni-icons>
					<uni-easyinput v-model="formData.email" type="text" maxlength="50" :inputBorder="false"
						clearSize="18" trim="all" placeholder="请输入邮箱" />
				</uni-forms-item>
				
				<view class="code-box flex">
					<uni-forms-item required name="code">
						<uni-icons custom-prefix="iconfont" type="icon-code" color="#999" size="18"></uni-icons>
						<uni-easyinput v-model="formData.code" type="digit" maxlength="6" :inputBorder="false"
							clearSize="18" trim="all" placeholder="请输入验证码" />
					</uni-forms-item>
					<view class="login-code">
						<up-code :seconds="seconds" @end="end" @start="start" ref="uCodeRef" @change="codeChange"></up-code>
						<up-button @tap="getCode" shape="circle">{{tips}}</up-button>
					</view>
				</view>

				<!-- <uni-forms-item name="googleCode">
					<uni-icons custom-prefix="iconfont" type="icon-gugeyanzhengma" color="#999" size="18"></uni-icons>
					<uni-easyinput v-model="formData.googleCode" type="digit" maxlength="10" :inputBorder="false"
						clearSize="18" trim="all" placeholder="请输入谷歌验证码" />
				</uni-forms-item> -->
			</uni-forms>
		</view>

		<view class="form-btn-box">
			<button @click="submit('form')" class="login-btn cu-btn block bg-cyan lg">确认注册</button>
			<view class="register text-center" @click="$tab.reLaunch('/pages/login')">已有账号？去登录</view>
		</view>
	</view>
</template>

<script>
	import _ from 'lodash'
	import {
		getCodeEmail,
		getTenantList
	} from '@/api/login'
	export default {
		data() {
			const validateConfirm = (rule, value, data, callback) => {
				if (this.formData.confirmPassword && this.formData.confirmPassword !== value) {
					callback('密码和确认密码不一致')
				}

				return true
			}

			const validatePConfirm = (rule, value, data, callback) => {
				if (this.formData.newPassword && this.formData.newPassword !== value) {
					callback('密码和确认密码不一致')
				}

				return true
			}

			return {
				captchaEnabled: false,
				tenantEnabled: false,
				tenantList: [],
				seconds:60,
				tips:'获取验证码',
				// 数据源
				formData: {
					userType: 'app_user',
					username: '',
					password: '',
					confirmPassword: '',
					nickname: '',
					invitationCode: '',
					email: '',
					code: '',
					uuid: '',
					tenantId: ''
					// googleCode: ''
				},
				// 规则
				rules: {
					username: {
						rules: [{
							required: true,
							errorMessage: '请输入登录名'
						}]
					},
					code: {
						rules: [{
							required: true,
							errorMessage: '请输入验证码'
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '密码不能为空'
						}, {
							pattern: '^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$).{8,16}$',
							errorMessage: '密码格式错误'
						}, {
							validateFunction: validateConfirm
						}]
					},
					confirmPassword: {
						rules: [{
							required: true,
							errorMessage: '确认密码不能为空'
						}, {
							pattern: '^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$).{8,16}$',
							errorMessage: '密码格式错误'
						}, {
							validateFunction: validatePConfirm
						}]
					},
					email: {
						rules: [{
							required: true,
							errorMessage: '请输入邮箱'
						},{
							format: 'email',
							errorMessage: '邮箱格式错误'
						}]
					}
				}
			}
		},
		mounted() {
			this.getTenant();
		},
		methods: {
			// 提交
			submit(ref) {
				this.$refs[ref].validate((err, value) => {
					if(!err){
						// this.$modal.loading("注册中，请等待...")
						this.$store.dispatch('Register', _.omit(this.formData,['confirmPassword'])).then(() => {
							// this.$modal.closeLoading()
							this.$modal.msgSuccess('注册成功')
							this.$tab.redirectTo('/pages/login')
						}).catch(() => {
							if (this.captchaEnabled) {
								// this.$modal.closeLoading()
								this.getCode()
							}
						})
					}
				})
			},

			getCode() {
				if(this.formData.email){
					if (this.$refs.uCodeRef.canGetCode) {
					    // 模拟向后端请求验证码
					    uni.showLoading({
					      title: '正在获取验证码',
					    });
						getCodeEmail(this.formData.email).then(res => {
							uni.hideLoading();
							this.$modal.msg('验证码已发送');
							this.$refs.uCodeRef.start();
						}).catch((err) => {
							console.log(err,'err')
							uni.hideLoading();
						})
					  } else {
					    this.$modal.msg('倒计时结束后再发送');
					  }
				} else {
					this.$modal.msg('请输入邮箱')
				}
			},

			getTenant() {
				getTenantList().then(res => {
					const data = res.data;
					this.tenantEnabled = data.tenantEnabled === undefined ? true : data.tenantEnabled;
					if (this.tenantEnabled) {
						this.tenantList = _.map(data.voList || [],vo => {
							return {
								...vo,
								value:vo.tenantId,
								text:vo.companyName
							}
						});
						if (this.tenantList != null && this.tenantList.length !== 0) {
							this.formData.tenantId = this.tenantList[0].tenantId;
						}
					}
				})
			},
			
			codeChange(text){
				this.tips = text;
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #ffffff;
	}
	
	.register-container{
		background-color: #ffffff;
		min-height: calc(100vh - var(--window-bottom) - var(--status-bar-height) - var(--window-top));
		
		.header{
			padding: 8% 0;
			margin-bottom: 10rpx;
			
			.logo{
				width: 100rpx;
				height: 100rpx;
			}
			
			.tip{
				color:#999;
				font-size:28rpx;
			}
		}
		
		.form-group{
			padding: 0 60rpx 0 40rpx;
			.tip{
				color:#999;
				font-size:22rpx;
				text-align:right;
				margin-top: -10rpx;
				margin-bottom: 20rpx;
			}
			&::v-deep{
				.uni-forms-item{
					margin-bottom: 30rpx;
					.uni-forms-item__content{
						border-radius:50rpx;
						background-color:#f5f6f7;
						display: flex;
						align-items:center;
						padding: 5rpx 24rpx;
					}
					
					.is-required{
						margin-top: 10rpx;
					}
					
					.uni-select{
						border:none;
						.uni-select__input-placeholder{
							color: #999;
							font-size: 12px;
						}
					}
				}
			}
			
			.code-box{
				.login-code{
					margin-left: 20rpx;
				}
				.login-code-img{
					height: 78rpx;
					margin-left: 20rpx;
					width: 200rpx;
					margin-top: 2rpx;
				}
			}
		}
		
		.form-btn-box{
			padding: 40rpx 100rpx 40rpx;
			.register{
				margin-top: 30rpx;
				cursor: pointer;
				font-size:28rpx;
				color:#666;
			}
		}
	}
</style>